<template>
  <div class="main">
    <div class="filter">
      <div class="filter_item">
        姓名：<Input
          v-model="userName"
          clearable
          placeholder="Enter something..."
          style="width: 300px"
        />
      </div>
      <div class="filter_item">
        性别：<Select
          v-model="sex"
          clearable
          style="width: 200px"
          @on-change="sexChange"
        >
          <Option v-for="item in sexs" :value="item.value" :key="item.key">{{
            item.value
          }}</Option>
        </Select>
      </div>
      <div class="filter_item">
        <Button type="primary" @click="getAllUser">查询</Button>
      </div>
      <div class="filter_item">
        <Button type="primary" @click="showModel">新增</Button>
      </div>
    </div>
    <div class="filter_item">
      <div class="table">
        <Table
          ref="table"
          :columns="userColumns"
          :data="userList"
          border
        ></Table>
      </div>
      <div class="page">
        <Page :total="total" @on-change="pageChange" show-elevator />
      </div>
    </div>

    <div>
      <Modal
        v-model="showAddUserModel"
        title="新增"
        width="1300"
        :closable="false"
        :mask-closable="false"
      >
        <AddGuest ref="add" />
        <div slot="footer">
          <Button @click="closeModel">取消</Button>
          <Button type="primary" @click="closeModel">确定</Button>
        </div>
      </Modal>
    </div>
    
  </div>
</template>

<script>
import AddGuest from "./AddGuest";
export default {
  name: "GuestManage",
  components: { AddGuest },
  data() {
    return {
      userName: "",
      sex: "",
      sexs: [
        { key: "男", value: "男" },
        { key: "女", value: "女" },
      ],
      userList: [],
      userColumns: [
        {
          key: "index",
          title: "序号",
          algn: "center",
          width: 80,
        },
        {
          key: "userName",
          title: "姓名",
          algn: "center",
        },
        {
          key: "sex",
          title: "性别",
          algn: "center",
        },
        {
          key: "phone",
          title: "电话",
          algn: "center",
        },
        {
          key: "identy",
          title: "身份证号码",
          algn: "center",
        },
      ],
      showAddUserModel: false,
      pageNo:1,
      total:0,
    };
  },
  methods: {
    getAllUser() {
      this.$axios
        .post("/api/user/getAllUser", {
          userName: this.$data.userName ? this.$data.userName : null,
          sex: this.$data.sex ? this.$data.sex : null,
          pageNo:this.pageNo,
        })
        .then((res) => {

          let data = res.data.data;
                              console.log(data);
          this.$data.userList = data.pageList;
          this.total=data.recordCount;

        });
    },
    showModel() {
      this.showAddUserModel = true;
    },
    closeModel() {
      this.showAddUserModel = false;
    },
    sexChange(e) {
      this.sex = e;
    },
    pageChange(e){
      this.pageNo = e;
      this.getAllUser();
    }
  },
};
</script>

<style>
.filter {
  display: flex;
  flex-wrap: wrap;
  height: 700;
}
.filter_item {
  margin-left: 30px;
  margin-top: 30px;
  float: left;
}
.table {
  margin-top: 30px;
}
</style>